import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import React, { useEffect, useState } from 'react';
import MySwiper from '../../../components/MySwiper';
import { getBannerList } from '../../../apis/bannerApi';
import { BannerModel } from '../../../models/bannerModel';
import {
  courseItemsInterface,
  courseParamsInterface,
} from '../../../models/courseModel';
import { getCourseListApi } from '../../../apis/courseApi';
import Mylist from '../../../components/Mylist';
import { useNavigation } from '@react-navigation/native';

const RecommendSreen = () => {
  let params = { pageNum: 1, pageSize: 5 };
  const [total, setTotal] = useState(0);
  const [loadMoreFlag, setLoadMoreFlag] = useState(false);
  // 要显示的课程列表
  const [courseList, setCourseList] = useState<courseItemsInterface[]>([]);

  const getCourseList = async (Iparams: courseParamsInterface) => {
    const response = await getCourseListApi(Iparams);
    // console.log(response);
    // const newList = [...courseList, ...response.data.data];
    setTotal(response.data.total);
    setCourseList(prevList => [...prevList, ...response.data.data]);
  };
  // console.log(courseList, total);
  // console.log(courseList);

  const [swiperData, setSwiperData] = useState<BannerModel[]>([]);
  // 获取轮播图数据
  const getSwiperData = async () => {
    const response = await getBannerList();
    console.log(response);

    setSwiperData(
      response.data.filter((item: BannerModel) => item.platform === 0),
    );
  };

  // 创建一个下拉刷新函数
  const onRefresh = () => {
    setLoadMoreFlag(total === courseList.length);
    params = { ...params, pageNum: 1 };
    setCourseList([]);
    return getCourseList(params);
  };
  // 创建一个上拉分页函数
  const onLoadMore = () => {
    params = { ...params, pageNum: params.pageNum + 1 };
    // const response = await getCourseListApi(newParams);
    return getCourseList(params);
  };

  // console.log(swiperData.map((item: BannerModel) => item.bannerSrc));
  // 初始化生命周期
  useEffect(() => {
    getSwiperData();
    getCourseList(params);
  }, []);

  return (
    <View style={styles.container}>
      {/* 列表 */}
      <View style={styles.list}>
        <Mylist
          HeaderComponent={Header} // 传入函数
          headerData={swiperData} // 传入数据
          DATA={courseList}
          Item={ListItem}
          FOnRefresh={onRefresh}
          FOnLoadMore={onLoadMore}
          loadMoreFlag={loadMoreFlag}
          // 判断是否有下拉刷新功能
          // hasRefreshControl={false}
          // 判断是否有上拉分页功能
          // hasLoadMore = {false}
        />
      </View>
    </View>
  );
};

// 头部组件
const Header = (swiperData: BannerModel[]) => {
  // console.log(swiperData);

  return (
    <View>
      <View style={styles.swiper}>
        {swiperData.length ? (
          <MySwiper
            data={swiperData.map((item: BannerModel) => item.bannerSrc)}
          />
        ) : (
          <Text>数据加载中</Text>
        )}
      </View>

      <View style={styles.listTitle}>
        <Text style={{ fontWeight: 'bold' }}>新上好课</Text>
        <Text>更多 {'>'}</Text>
      </View>
    </View>
  );
};

// 子组件
const ListItem = ({ item }: { item: courseItemsInterface }) => {
  const navigation = useNavigation();
  const onPress = () => {
    navigation.navigate('Details', { id: item.id.toString() });
  };
  return (
    <TouchableOpacity
      // style={styles.button}
      onPress={onPress}
    >
      <View style={styles.listItem}>
        <Image
          style={styles.listItem_Image}
          source={{
            uri: item.cover,
          }}
        />
        <View style={styles.listItem_Right}>
          <Text style={styles.listItem_Right_Title}>{item.title}</Text>
          <Text>初阶</Text>
          <View style={styles.listItem_Right_Bottom}>
            <Text style={styles.listItem_Right_Price}>￥{item.price}</Text>
            <Text>{item.lessonNum}人学习</Text>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    height: '100%',
  },
  swiper: {
    height: 200,
  },
  list: {
    flex: 1,
  },
  listTitle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
  },
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    gap: 10,
  },
  listItem_Image: {
    width: 100,
    height: 120,
    objectFit: 'cover',
    borderRadius: 10,
  },
  listItem_Right: {
    flex: 1,
    justifyContent: 'space-around',
    height: 100,
  },
  listItem_Right_Title: {
    fontSize: 16,
    fontWeight: 'bold',
  },
  listItem_Right_Bottom: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  listItem_Right_Price: {
    color: 'red',
  },
});

export default RecommendSreen;
